<template>
	<view v-if="JSON.stringify(subThemesAndPlaces) != '{}'" class="publishContainer">
		<view class="nav">
			<view class="community">
				{{ weather.city }}
			</view>
			<view class="weather">
				<image :src="weather.icon" mode="cover"></image>
				{{ weather.now }}°
			</view>
		</view>
		<view class="content">
			<text class="h2">选择活动主题</text>
			<view class="subThemes">
				<view class="tag gray" @click="currentSubTheme = item" :key="i"
					:class="{ primary: currentSubTheme.id == item.id }"
					v-for="(item, i) in subThemesAndPlaces.subThemes">
					{{ item.typeName }}
				</view>
			</view>

			<text class="h2">选择活动地点</text>
			<view class="themePlaces">
				<view class="tag gray" @click="currentThemePlace = item"
					:class="{ primary: currentThemePlace.id == item.id }" v-for="(item, i) in themePlacesList" :key="i">
					{{ item.themeName }}
				</view>
			</view>
			<text class="h2">选择活动开始时间</text>
			<view class="time">
				<view class="example-body">
					<uni-datetime-picker returnType="timestamp" hideSecond :start="Date.now()" v-model="time" />
				</view>
			</view>
			<text class="h2">填写活动描述</text>
			<input class="desc" type="text" placeholder="请填写相关备注信息" v-model="desc" />
			<button type="primary" size="large" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				themeId: '',
				subThemesAndPlaces: {},
				currentSubTheme: '',
				currentThemePlace: '',
				time: Date.now(),
				desc: '',
				communityId: 100
			}
		},
		methods: {
			async getSubTheme() {
				try {
					const {
						data
					} = await uni.$http.get(`/publish/findSubTheme/${this.communityId}/${this.themeId}`)
					console.log('发布活动主题和地点信息', data);
					this.subThemesAndPlaces = data.subThemesAndPlaces
				} catch (e) {
					console.log('获取子主题失败', e);
				}
			},
			/* 发布活动 */
			async submit() {
				// 初步效验信息
				if (!this.currentSubTheme || !this.currentThemePlace)
					return uni.$showMsg('请填写信息后再提交')
				let query = {
					themeId: this.themeId,
					subThemeId: this.currentSubTheme.id,
					placeName: this.currentThemePlace.themeName,
					timeStamp: this.time,
					communityId: 100,
					actDescribe: this.desc
				}
				console.log('发布活动参数: ', query);
				try {
					const {
						data
					} = await uni.$http.post('/publish/save', query)
					if (data.code == 200) {
						console.log(data);
						uni.$showMsg('发布活动成功')
						this.subThemesAndPlaces = {}
						this.currentSubTheme = ''
						this.currentThemePlace = ''
						uni.redirectTo({
							url: "../showActives/showActives?themeId=" + this.themeId,
						})
					}
				} catch (e) {
					uni.$showMsg('发布活动失败!')
					console.log('发布活动失败', e);
				}
			}
		},
		computed: {
			...mapState('weather', ['weather']),
			themePlacesList() {
				if (!this.currentSubTheme) return this.subThemesAndPlaces.themePlacesList
				return this.subThemesAndPlaces.themePlacesList.filter(item => item.subThemeId == this.currentSubTheme.id)
			}
		},
		onLoad(props) {
			this.themeId = +props.themeId
			this.getSubTheme()

		}
	}
</script>

<style scoped lang="less">
	.publishContainer {
		padding-top: 80rpx;

		.nav {
			box-sizing: border-box;
			width: 100%;
			height: 100rpx;
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 50rpx;
			box-shadow: 2px 0px 3px 1px rgba(0, 0, 0, 0.2);
			margin-bottom: 30rpx;
			position: fixed;
			top: 0;
			left: 0;
			background-color: #FFFFFF;

			.weather {
				display: flex;
				align-items: center;
				image {
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
				}
			}
		}

		.h2 {
			font-size: 40rpx;
			line-height: 80rpx;
		}

		.subThemes,
		.themePlaces {
			display: flex;
			flex-flow: row wrap;
			border-bottom: 1px solid #CCCCCC;
			padding-top: 10rpx;

			.tag {
				margin-bottom: 30rpx;
				margin-right: 10rpx;
			}
		}

		.content {
			margin: 10rpx;
			padding: 15rpx;
			border-radius: 10px;
			box-shadow: 2px 0px 3px 1px rgba(0, 0, 0, 0.2);
		}

		.time {
			padding-bottom: 20rpx;
			border-bottom: 1px solid #CCCCCC;
		}

		.desc {
			border: 1px solid #CCCCCC;
			line-height: 60rpx;
			height: 60rpx;
			padding-left: 30rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
		}
	}

	.tag {
		min-width: 100rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 36rpx;
		text-align: center;
		border: 1rpx solid transparent;
		border-radius: 4rpx;
		padding: 0 20rpx;
	}

	.primary {
		border-color: #27BA9B !important;
		background: #27BA9B !important;
		color: #fff !important;
	}

	.plain {
		border-color: #27BA9B;
		color: #27BA9B;
		background: lighten(#27BA9B, 50%);
	}

	.gray {
		border-color: #ccc;
		background: #ccc;
		color: #fff;
	}
</style>
